﻿@using ZFY.Core

@{
  string avatarUrl = null;
  if (!true.Equals(ViewData["signed-out"]))
  {
    avatarUrl = Context.User.Claims.FirstOrDefault(x => x.Type == ZFYProfileClaimTypes.Avatar)?.Value;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />

  <title>点击头像回到主页^_^</title>

  <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
  <link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
  <link href="~/lib/element-ui/theme-chalk/index.min.css" rel="stylesheet" />
  <script src="~/lib/vue/vue.min.js"></script>
  <script src="~/lib/element-ui/index.min.js"></script>
  <script src="~/lib/axios/axios.min.js"></script>
  <script src="~/js/request.js"></script>

</head>

<body>
  <div class="layout">
    <div id="avatar" onclick="window.location.href='/home'">
      <el-avatar :size="100" src="@avatarUrl"></el-avatar>

    </div>

    <div class="main">
      @RenderBody()
    </div>


  </div>

  @RenderSection("scripts", required: false)
  @RenderSection("styles",false)
  <style>
    html,
    body,
    .layout {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background: url('/img//Login.jpg');
      background-size: cover
    }

    .layout {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .main {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 5px;
      padding: 67px 15px 15px 15px;

      box-sizing: border-box
    }

    .base {
      background-color: rgba(255, 255, 255, 1);
      padding: 15px;
      border-radius: 5px;
    }

    #avatar {
      position: relative;
      top: 52px;
      z-index: 9999;
    }

    #avatar:hover {
      cursor: pointer;

    }

    .rgBtn {
      margin-top: 20px;
      background-color: #314C5D;
      border-color: #314C5D;
    }

    .rgBtn:hover {
      background-color: #190710;
      border-color: #190710;
    }

    .rgBtn:focus {
      background-color: #190710;
      border-color: #190710;
    }
  </style>
  <script>

    var vm = new Vue({
      el: '#avatar',
      data() {
        return {
          url: '@avatarUrl'
        };
      },
      methods: {

      }
    })
  </script>
</body>

</html>
